 <!--
 被服下单
 同一科室 同一申领时间只能下一单
 获取截止时间，比较，过了那默认的申领日期改到后天
 -->
<template>
    <div class="order-box order-box-cloth">
        <div class="conHeader-box conHeader-box--cloth" @mouseover="bindMouse" @mouseout="unbindMouse">
            <div class="conHeader conHeader-cloth" >
                <div class="ks-ul">
                    <span
                        v-for="(ks,index) in ks_lis"
                        :key="index"
                         :class="['ks-item',curr_ks==ks.addr ? 'curr':'']" 
                         @click="handleGetCloth(ks.addr)">
                        {{ks.addr}}
                    </span>
                </div>
            </div>
        </div>
        <div class="order-list cloth-table">
            <div class="el-table  el-table--border"  style="width: 100%">
                <table  cellspacing="0" cellpadding="0" border="0" class="el-table__header" style="padding-right:4px;width: 100%">
                    <colgroup>
                        <col>
                        <col width="100">
                        <col width="120">
                        <col v-if="$root.$data.cloth_des">
                        <col>
                        <col>
                        <col>
                    </colgroup>
                    <thead>
                    <tr class="thead">
                        <th class="is-center is-leaf bed-td"><div class="cell">核定病床</div></th>
                        <th class="is-center is-leaf"><div class="cell">织物类型</div></th>
                        <th class="is-center is-leaf"><div class="cell">尺码</div></th>
                        <th class="is-center is-leaf des-td" v-if="$root.$data.cloth_des"><div class="cell">备注</div></th>
                        <th class="is-center is-leaf"><div class="cell">下单数量</div></th>
                        <th class="is-center is-leaf total-td"><div class="cell">合计</div></th>
                        <th class="is-center is-leaf total-td"><div class="cell">最高限量</div></th>
                    </tr>
                    </thead>
                </table>
            </div>
            <div class="el-table  el-table--border"  style="width: 100%; overflow-y: scroll; height: calc(100% - 40px); margin-top: 0" >
                <table  cellspacing="0" cellpadding="0" border="0" class="el-table__body" style="width: 100%;">
                    <colgroup>
                        <col>
                        <col width="100">
                        <col width="120">
                        <col v-if="$root.$data.cloth_des">
                        <col>
                        <col>
                        <col>
                    </colgroup>
                    <tbody>

                    <template v-for="(weaving,windex) in info.weaving" :keys="windex">
                        <tr v-for="(size,sindex) in weaving.sizes" :key="weaving.wname+size.wsize">
                            <td class="is-center bed-td" v-if="windex == 0 && sindex == 0" :rowspan="info.rowl"><div class="cell">{{info.bed_num}}</div></td>
                            <td class="is-center"  v-if=" sindex == 0" :rowspan="weaving.sizes.length"><div class="cell">
                                {{weaving.wname}}
                            </div></td>
                            <td class="is-center"><div class="cell">
                                {{size.wsize}}
                            </div></td>

                            <td class="is-center des-td" v-if="$root.$data.cloth_des"><div class="cell">
                                <el-input
                                    type="textarea"
                                    :rows="1"
                                    placeholder="请输入备注"
                                    v-model="size.wsize_des">
                                </el-input>
                            </div></td>
                            <td class="is-center"><div class="cell">
                                <el-input-number
                                    size="mini"
                                    v-model="size.wsize_qty"
                                    :step="size.wsize_qty != 0 && Number(size.wsize_qty) < Number(size.wsize_min) ? Number(size.wsize_qty):size.wsize_min"
                                    :min="0"
                                    @change="handleChangeNumber(windex)"
                                ></el-input-number>
                            </div></td>

                            <td :class="['is-center total-td',Number(weaving.wname_total) > Number(weaving.wname_max) ? 'red':'']"
                                v-if="sindex == 0" :rowspan="weaving.sizes.length"><div class="cell number">
                                {{weaving.wname_total}}
                            </div></td>
                            <td class="is-center total-td"  v-if="sindex == 0" :rowspan="weaving.sizes.length"><div class="cell number">
                                {{weaving.wname_max}}
                            </div></td>
                        </tr>
                    </template>


                    </tbody>
                </table>
            </div>

        </div>
        <!-- 下单 -->
        <div class="place-order">
            <div class="order-item">
                <span>选择申领日期：</span>
                <el-date-picker
                    v-model="searchObj.date"
                    type="date"
                    :clearable="true"
                    :picker-options="expireTimeOption"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    placeholder="选择申领日期"
                    style="width:146px;">
                </el-date-picker>
            </div>
            <div class="order-item" style="width:50%;" v-if="$root.$data.cloth_des">
                <span>填写订单备注：</span>
                <el-input v-model="searchObj.remarks" placeholder="请输入" style="width:calc(100% - 110px);"></el-input>
            </div>
            <div class="order-item">
                <el-button class="order-btn"  @click="handleOrderModel">
                    <span>下单</span>
                </el-button>
            </div>
        </div>
        <!-- 确认下单详情 -->
        <order-details v-if="detailsModel" :row="info" dialogTitle="确认下单" @hideModel="hideOrderModel" @onSure="handleSubmit"></order-details>
    </div>

</template>

<script>
import {timeFormat,getCountDay} from '../../common/today'
import orderDetails from './sub/order-details'
import {
    clothKsAxios,
    clothInfoAxios,
    clothOrderAxios,
    clothTimeAxios
} from '../../server/getData'
export default {
    props:{
        start:''
    },
    data(){
        return{
            ks_lis:[],
            curr_ks:'',
            lis:{},

            info:{},

            expireTimeOption: {
                disabledDate(date) {
                    //disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean
                    return date.getTime() < Date.now() ;
                }
            },
            searchObj:{
                date:getCountDay(1,new Date(),'-'),
                remarks:''
            },
            // 下单详情,二次确认
            detailsModel:false,
            time:'',
            intervals:null,
            today_time:timeFormat()
        }
    },
    components:{
        orderDetails
    },
    created(){
        this.handleGetKs()
        this.handleGetTime()
    },
    mounted(){

    },
    beforeDestroy(){  // 被服下单组件销毁前
        clearInterval(this.intervals)
    },
    methods:{
        handleGetTime(){
            clothTimeAxios().then(res=>{
                this.today_time = timeFormat()
                this.time = this.today_time+' '+res.data.stime
                this.handleCompareTime(1)
                clearInterval(this.intervals)
                this.intervals = setInterval(_=>{
                    this.handleCompareTime()
                },30000)

            },res=>{})
        },
        handleCompareTime(s){
            //如果当前日期是第二天直接刷新界面：今天页面不刷新，停留过了12点
            this.$root.$data.deadline = false
            if(timeFormat() != this.today_time){
                clearInterval(this.intervals)
                location.reload()
                return
            }
            if(new Date(this.time).getTime() <= new Date().getTime()){
                this.$root.$data.deadline = true
                this.expireTimeOption = {
                    disabledDate(date) {
                        return date.getTime() < Date.now() + 24*60*60*1000 ;
                    }
                }
//                if(s){
//                    this.searchObj.date = today.tmr(2)
//                }
            }
        },
        handleGetKs(){
            clothKsAxios().then(res=>{
                this.ks_lis = []
                res.data.forEach(v=>{
                    if(v.isbool == 0){
                        this.ks_lis.push(v)
                    }
                })
                this.handleGetCloth(this.ks_lis[0].addr)
                setTimeout(_=>{
                    let w = 0
                    window.document.querySelectorAll('.ks-ul .ks-item').forEach(item=>{
                            w += item.getBoundingClientRect().width + 10
                    })
                    window.document.querySelector('.ks-ul').style.width = w+'px'
                },600)
            },res=>{})
        },
        scrollFunc (e) {
            e = e || window.event;
            let conHeader = document.querySelector(".conHeader-cloth")
            let scrollLeft = conHeader.scrollLeft
            if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件
                if (e.wheelDelta > 0) { //当滑轮向上滚动时
                    conHeader.scrollLeft -= 100
                }
                if (e.wheelDelta < 0) { //当滑轮向下滚动时
                    conHeader.scrollLeft += 100
                }
            } else if (e.detail) {  //Firefox滑轮事件
                if (e.detail> 0) { //当滑轮向上滚动时
                    conHeader.scrollLeft -= 100
                }
                if (e.detail< 0) { //当滑轮向下滚动时
                    conHeader.scrollLeft += 100
                }
            }
        },
        bindMouse(){
            //给页面绑定滑轮滚动事件
            if (document.addEventListener) {
                document.addEventListener('DOMMouseScroll', this.scrollFunc, false);
            }
            //滚动滑轮触发scrollFunc方法
            window.onmousewheel = document.onmousewheel = this.scrollFunc;
        },
        unbindMouse(){
            if (document.addEventListener) {
                document.removeEventListener('DOMMouseScroll', this.scrollFunc, false);
            }
            //滚动滑轮触发scrollFunc方法
            window.onmousewheel = document.onmousewheel = ()=>{};
        },
        handleGetCloth(addr){
            this.curr_ks = addr
            clothInfoAxios(this.curr_ks).then(res=>{
                let rowl = 0
                res.data.weaving.forEach(v=>{
                    rowl +=  v.sizes.length
                    v.sizes.forEach(s=>{
                        s.wsize_min = Number( s.wsize_min)
                        s['old_qty'] = s.wsize_qty
                    })
                })
                res.data['rowl'] = rowl
                this.$root.$data.cloth_des = res.data.weaving_show_des == "1"
                this.info = res.data
            },res=>{})
        },

        handleChangeNumber(index){
            let total = 0
            this.info.weaving[index].sizes.forEach(v=>{
                total += Number(v.wsize_qty)
            })
            this.info.weaving[index].wname_total = total.toString()
        },

        handleOrderModel(){
            //下单，二次确认，判断是否都为0
            let total = 0
            this.info.weaving.forEach(v=>{
                total += Number(v.wname_total)
            })
            if(total==0){
                return throwErrorTips('','申领总数不能为0！')
            }
            //比较时间
            if(this.searchObj.date==''){
                return throwErrorTips('','请选择申领日期')
            }
            if(this.$root.$data.deadline  &&
                new Date(this.today_time.replace(/-/g,'/')).getTime()+24*60*60*1000 >= new Date(this.searchObj.date.replace(/-/g,'/')).getTime()
                ){
                return throwErrorTips('',this.searchObj.date+'的医用织物申领时间已截止')
            }
            this.info['order_total'] = total
            this.info.order_time = this.searchObj.date
            this.info.des = this.searchObj.remarks
            this.detailsModel = true
        },
        hideOrderModel(){
            this.detailsModel = false
        },
        handleSubmit(callBack){
            let postd = JSON.parse(JSON.stringify(this.info))
            postd.weaving.forEach(v=>{
                v.sizes.forEach(s=>{
                    s.wsize_min = s.wsize_min.toString()
                    s.wsize_qty = s.old_qty =='' && s.wsize_qty == 0 ? '0' : s.wsize_qty.toString()
                })
             })
            clothOrderAxios(postd).then(res=>{
                this.$Message({
                    showClose: true,
                    message: '申领成功',
                    type: 'success',
                    duration:5000
                });
                this.detailsModel = false
                callBack()
            },res=>{
                callBack()
            })
        }
    }
}
</script>
 <style lang="less">
    @import "../../assets/less/cloth.less";
 </style>

